<template>
  <div class="box">
    <div class="top">
      <p class="title">实时游客统计</p>
      <p class="bg"></p>
      <p class="right">
        可预约总量
        <span>9999</span>
        人
      </p>
    </div>
    <div class="number">
      <span v-for="(item, index) in people" :key="index">{{ item }}</span>
    </div>
    <div ref="charts" class="charts"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
// 水球图插件
import 'echarts-liquidfill'

const people = ref('212986人')

// 获取节点
const charts = ref()
onMounted(() => {
  const mycharts = echarts.init(charts.value)
  mycharts.setOption({
    xAxis: {},
    yAxis: {},
    series: [
      {
        label: {
          formatter: '预测量',
          color: '#fff',
          fontSize: 16,
          insideColor: '#fff',
          fontWeight: 'bold',
          // align: 'center',
          // baseline: 'top',
          position: ['50%', '20%'],
        },
        radius: '90%',
        type: 'liquidFill',
        data: [0.41, 0.38, 0.35],
        animationDuration: 0,
        animationDurationUpdate: 0,
        color: ['#29fcff', '#29fcff', '#29fcff'],
        outline: {
          itemStyle: {
            borderWidth: 8, // 边框
            // shadowBlur: 20,
            borderColor: '#29fcff',
          },
        },
        backgroundStyle: {
          // color: '#29fcff',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(134, 251, 156, 0.5)' }, // 开始颜色，透明度较低
            { offset: 1, color: 'rgba(45, 67, 98, 0)' }, // 结束颜色，完全透明
          ]),
        },
      },
    ],
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
  })
})
</script>

<style lang="scss" scoped>
.box {
  background: url('../../images/dataScreen-main-lt.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  .top {
    margin-left: 20px;
    .title {
      color: white;
      font-size: 20px;
    }
    .bg {
      width: 68px;
      height: 7px;
      background: url('../../images/dataScreen-title.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
    .right {
      float: right;
      margin-right: 10px;
      color: white;
      font-size: 20px;
    }
  }
  .number {
    margin-top: 30px;
    display: flex;
    padding: 15px;
    span {
      flex: 1;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
      background: url('../../images/total.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .charts {
    width: 100%;
    height: 250px;
  }
}
</style>
